<template>
	<view class="container">
		<view class="bg-colore"></view>
<!-- 		<uni-search-bar @confirm="search" :focus="false" v-model="searchValue" @blur="blur" @focus="focus"
			@input="input" @cancel="cancel" @change="change" @clear="clear"></uni-search-bar> -->

		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#1296db">
		</uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">

				<view v-show="current === 1">

				</view>
				<view v-show="current === 2">

				</view>
			</view>
		</view>

		<!-- 	<view>{{searchValue}}</view> -->
		<view class="homeLayout">
			<view class="banner">
				<swiper indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay
					circular>
					<swiper-item>
						<!-- 				<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/"> -->
						<image src="/static/banner1.jpg" mode="aspectFill"></image>
						<!-- 				</uni-link> -->
					</swiper-item>
					<swiper-item>
						<image src="/static/banner2.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/banner3.jpg" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice">
				<view class="left">
					<uni-icons type="sound-filled" size="20" color="#1296db"></uni-icons>
					<text class="text">公告</text>
				</view>
				<view class="center">
					<swiper vertical autoplay circular interval="1500" duration="300">
						<swiper-item v-for="item in 3">足球资讯足球资讯足球资讯足球资讯足球资讯足球资讯足球资讯</swiper-item>
					</swiper>
				</view>
				<view class="right">
					<uni-icons type="right" size="16" color="#1296db"></uni-icons>
				</view>
			</view>
		</view>
		<view class="news">
			<!-- 	  		各类热点资讯（可点击） -->
			<view class="title">
				{{}}
			</view>
			<view class="newsContainer" v-for="item in news" key="index">
				<navigator :url="item.navigation">
					<view class="newsLeft">
						<image :src="item.imagelink" mode="aspectFill"></image>
					</view>
				</navigator>
				<view class="newsRight">
					<view class="text">
						<uni-link href="https://dongqiudi.com/articles/4390182.html" :text="item.title"
							showUnderLine="false" color="black" font-size="70rpx">

							{{item.title}}

						</uni-link>
					</view>
					<view class="time">
						<text class="timesplice">{{item.time}}</text>

						<uni-icons type="chat" size="16"><text class="comment">{{item.commentNum}}</text></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onTop">
				<uni-icons type="up" size="30"></uni-icons>
			</view>
			<view class="item" @click="onRefresh">
				<uni-icons type="loop" size="30"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		ref
	} from 'vue';
	import {
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app";
	import {
		baseUrl
	} from '../../tool/tool';

	function onTop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 250
		})
	};

	function onRefresh() {
		uni.startPullDownRefresh();
	}
	onMounted(() => {
		console.log(2525);
		uni.request({
			url: baseUrl + "/News/getAllNews",
			method: "POST",
			success(res) {
				news.value = res.data;
			}
		})
	});
	// let news = ref([
	// 	{
	// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
	// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
	// 		time:"2024-07-09",
	// 		commentNum:25,
	// 	},
	// 	{
	// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
	// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
	// 		time:"2024-07-09 15:35:59"
	// 	},
	// 	{
	// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
	// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
	// 		time:"2024-07-09 15:35:59"
	// 	},
	// 	{
	// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
	// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
	// 		time:"2024-07-09 15:35:59"
	// 	},
	// 	{
	// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
	// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
	// 		time:"2024-07-09 15:35:59",
	// 	}
	// ])
	let news = ref([]);
	// onShow(())=>{
	// 	console.log("123123123");
	// 	uni.request({
	// 		url: baseUrl + "/News/getAllNews",
	// 		method: "POST",
	// 		success(res) {
	// 			news.value=res.data;
	// 		}
	// 	})
	// });
	// onReachBottom(()=>{
	// 	    //news.value.push(...news.value); // 使用扩展运算符将 news 数组的内容添加到末

	// });
	function Refresh() {
		uni.request({
			url: baseUrl + "/News/getAllNews",
			method: "POST",
			success(res) {
				news.value = res.data;
			}
		})
		// news.value = [
		// 	{
		// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
		// 		time:"2024-07-09 15:35:59",
		// 		commentNum:25,
		// 	},
		// 	{
		// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
		// 		time:"2024-07-09 15:35:59"
		// 	},
		// 	{
		// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
		// 		time:"2024-07-09 15:35:59"
		// 	},
		// 	{
		// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
		// 		time:"2024-07-09 15:35:59"
		// 	},
		// 	{
		// 		url:"https://bdimg6.qunliao.info/fastdfs7/M00/90/0A/280x210/crop/-/rBUBsmaM6HqAPrsKAAifijdWPns303.png",
		// 		content:"官方：中国香港将在9月与斐济、所罗门群岛进行友谊赛",
		// 		time:"2024-07-09 15:35:59",
		// 	}
		// ]
		// uni.stopPullDownRefresh()
	}
	onPullDownRefresh(() => {
		news.value = []; // 立即清空news数组

		// 一秒后更新news数据
		setTimeout(() => {
			Refresh();
			// 数据更新后再等待一秒，然后停止下拉刷新
			setTimeout(uni.stopPullDownRefresh, 100);
		}, 1000); // 等待1秒后执行
	});

	const searchValue = ref();
	const items = ['热榜', '校园资讯', '赛事'];
	const current = ref(0);
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			console.log(e.currentIndex)
			current.value = e.currentIndex;
			// setTimeout(()=>{
			// 	current.value = 0;
			// },2000);
			switch (current.value) {
				case 1:
					uni.navigateTo({
						url: '/pages/suggestion/suggestion',
						success: function() {
							// 你可以在这里重置 current.value
							current.value = 0;
						},
						fail: function() {
							console.log("Failed to navigate to suggestion page");
						}
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/competition/competition',
						success: function() {

							// 你可以在这里重置 current.value
							current.value = 0;
						},
						fail: function() {
							console.log("Failed to navigate to competition page");
						}
					});
					break;
				default:
					break;
			}
		}
	};

	function input() {
		console.log(searchValue);
		searchValue.value = searchValue
	}

	function search() {

		console.log(1);
	}
</script>

<style lang="scss" scoped>
	.bg-colore {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: linear-gradient( #BBE5FD 0%, #D2DAFD 49%, #fff 100%);
		z-index: -1;
	}

	.homeLayout {
		.banner {
			width: 750rpx;
			padding: 30rpx 0;

			swiper {
				width: 750rpx;
				height: 340rpx;

				swiper-item {
					width: 100%;
					height: 100%;
					padding: 0 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 15rpx;
					}
				}
			}
		}

		.notice {
			width: 690rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: rgb(208, 218, 223, 0.5);
			margin: 0 auto;
			border-radius: 80rpx;
			display: flex;

			.left {
				width: 140rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.text {
					color: #1296db;
					font-weight: 600;
					font-size: 28rpx;
				}
			}

			.center {
				flex: 1;

				swiper {
					height: 100%;

					&-item {
						height: 100%;
						font-size: 30rpx;
						color: #000000;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}

			.right {
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
	}

	.news {
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		height: 980rpx;
		background: rgb(0, 0, 0, 0);

		.newsContainer {
			width: 100%;
			height: 250rpx;
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			/* 根据需要调整 newsLeft 和 newsRight 之间的间距 */
			.newsLeft {
				margin-top: 15rpx;
				margin-bottom: 15rpx;
				width: 220rpx;
				height: 220rpx;
				margin-right: 30rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.newsRight {
				flex: 1;
				// background: #666;
			}

			.text {
				margin-top: 20rpx;
				height: 190rpx;
			}

			.time {
				font-size: 25rpx;
				color: #666;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.timesplice {
					width: 70%;
				}

				.comment {
					flex: 1;
					font-size: 25rpx;
					color: #666;
					margin-right: 50rpx;
				}
			}

		}
	}

	.float {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;

		.item {
			width: 90rpx;
			height: 90rpx;
			background: rgba(255, 255, 255, 0.93);
			border-radius: 50%;
			margin-bottom: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #eee;
		}
	}
</style>ㄅ